<template>
  <div class="loginBox">
    <h2>千锋会议室管理系统</h2>
    <el-form :model="formData" class="form">
      <el-input
        class="username"
        clearable
        :prefix-icon="Phone"
        v-model="formData.tel"
      ></el-input>
      <el-input
        class="password"
        type="password"
        placeholder="Please input password"
        show-password
        :prefix-icon="Lock"
        v-model="formData.password"
      />
      <el-button type="success" class="loginBtn" @click="loginFn">登录</el-button>
    </el-form>
    <QfDialog 
      :title="title"
      :isShow="isShow"
      :closeDelay="1000"
      :isCloseBtn="false"
      :isCloseMask="false"
      @dialogClose="dialogCloseFn"
    />
  </div>
</template>

<script setup>
import { Phone, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { useRouter } from "vue-router";
import { login } from "../api/index.js";
const router = useRouter();
// vuex的引入和创建
// import { useStore } from "vuex";
// const store = useStore()

// pinia的引入和创建
import { useUserStore } from '../storesPinia/user.js';
const userStore = useUserStore();

// 弹出框功能
const isShow = ref(false);
const title = ref("");
let dialogCloseFn = function(v){}


// 获取表单信息
const formData = reactive({
  tel:"17600901915",
  password:"901915"
});
// 点击登录按钮时，提交到后端
function loginFn(){
  // 发起登录请求
  login({
    tel: formData.tel,
    password: formData.password
  }).then(res=>{
    const data = res.data;
    // 请求结束后，根据响应数据，判断成功或失败
    if(data.code === 1){
      const {uName, uId, tId, power} = data.data;
      // 成功后将用户相关信息存储
      // localStorage.setItem("userMsg", JSON.stringify({
      //   token: data.token,
      //   uName, tId, uId, power
      // }));

      // vuex状态管理器存储
      // store.commit("user/change_token", data.token);
      // store.commit("user/change_uName", uName);
      // store.commit("user/change_tId", tId);
      // store.commit("user/change_uId", uId);
      // store.commit("user/change_power", power);

      // pinia状态管理存储
      userStore.change_power(power);
      userStore.change_uId(uId);
      userStore.change_tId(tId);
      userStore.change_token(data.token);
      userStore.change_uName(uName);
      
      localStorage.setItem("userMsg", JSON.stringify({
        token: data.token,
        uName, tId, uId, power
      }));

      // 提示框操作
      isShow.value = true;
      title.value = "登录成功";
      dialogCloseFn = function(v){
        isShow.value = v;
        router.push("/");
      }
    }else{
      // 提示框操作
      isShow.value = true;
      title.value = data.msg;
      dialogCloseFn = function(v){
        isShow.value = v;
      }
    }
  })
}
</script>

<style>
.loginBox{
  width:300px;
  height:240px;
  background: #fff;
  padding: 20px;
  position: absolute;
  left:0;right:0;top:0;bottom:0;
  margin: auto;
}
.loginBox h2{
  text-align: center;
}
.loginBox .form .username, .loginBox .form .password{
  margin: 10px 0;
}
.loginBox .form .loginBtn{
  width: 100%;
  margin: 10px 0;
}

</style>